1. define component

                function Header() {
                      return <h1>Header area </h1>;
                }

              

2. usage

Use inside the view return()

              <Header  />
             
              

Complete code

                
               'use client'
          import React from 'react';
          import { useState, useEffect } from "react";


          function Header() {
              return <h1>Header area </h1>;
          }

          export default function Home() { 
            
              return (
                  <div>
                      <Header  />
                      <Header  />
                      <Header  />
                  </div>
              );
            
          }

        

1. use props as parameter in the component function

                   function Header(props) {
                      return <h1>Header area </h1>;
                   } 
                  

2. send data as parameter

                      <Header title="react " comment="javascript library" />
                      <Header title="django " comment="Python framework" />
                  

3. read the data in component

                  function Header(props) {
                      return <h1>Web techologies {props.title} is {props.comment}</h1>;
                  } 
                  

Complete code

                
                        'use client'
                    import React from 'react';
                    import { useState, useEffect } from "react";


                    function Header(props) {
                      return <h1>Web techologies {props.title} is {props.comment}</h1>;
                    } 

                    export default function Home() { 
                      
                        return (
                            <div>
                                <Header title="react " comment="javascript library" />
                                <Header title="django " comment="Python framework" />
                            </div>
                        );
                      
                    }